<template>
  <div class="group-list-wrap">
    <div class="table-wrap">
      <div class="table-search-wrap">
        <a-input-search v-model="searchTableValue"
                        placeholder="请输入关键字进行查询"
                        style="width: 200px;"
                        @search="getConnectorList" />
      </div>
      <a-table :columns="columns"
               :pagination="false"
               :data-source="tableData">
        <span slot="type"
              slot-scope="type">
          {{ CONNECTOR_TYPE_MAP[type] }}
        </span>
        <span slot="validationType"
              slot-scope="validationType">
          {{ VALIDATION_TYPE_MAP[validationType] }}
        </span>
        <span slot="state"
              slot-scope="text, record">
          <a-tag v-if="text !== '1'"
                 style="cursor: pointer;"
                 @click="onChangeStatus(record)">
            {{ STATE_MAP[text] }}
          </a-tag>
          <a-popconfirm v-else
                        placement="left"
                        destroyTooltipOnHide
                        title="停用将会导致该连接器下所有接口不可用，确认停用吗？"
                        @confirm="() => onChangeStatus(record)">
            <a-tag color="green"
                   style="cursor: pointer;">
              {{ STATE_MAP[text] }}
            </a-tag>
          </a-popconfirm>
        </span>
      </a-table>
      <div class="page-wrap">
        <a-pagination size="small"
                      v-model="pageInfo.current"
                      :show-total="total => `共 ${total} 条数据`"
                      :total="pageInfo.total"
                      :pageSize="pageInfo.pageSize"
                      @change="getConnectorList"
                      show-size-changer
                      show-quick-jumper />
      </div>
    </div>
  </div>
</template>

<script>
import { columns, VALIDATION_TYPE_MAP, STATE_MAP, CONNECTOR_TYPE_MAP } from '../config'
import { fetchConnectorPage, fetchConnectorUpdateState } from '../../../api/connector-manage'
export default {
  name: 'GroupList',
  props: {
    selectNode: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      tableData: [],
      VALIDATION_TYPE_MAP: VALIDATION_TYPE_MAP,
      STATE_MAP: STATE_MAP,
      CONNECTOR_TYPE_MAP: CONNECTOR_TYPE_MAP,
      searchTableValue: '',
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      columns: columns
    }
  },
  watch: {
    selectNode: {
      handler: function (newNode) {
        if (newNode && newNode.showRightType === 'GROUP') {
          this.pageInfo.current = 1
          this.getConnectorList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async getConnectorList () {
      const res = await fetchConnectorPage({
        connectorId: this.selectNode.id,
        keyWord: this.searchTableValue,
        page: {
          current: this.pageInfo.current,
          size: this.pageInfo.pageSize
        }
      })
      this.tableData = res.list || []
      this.pageInfo.total = res.totalCount || 0
    },
    async onChangeStatus (record) {
      const { state, ...other } = record
      let val = {
        ...other,
        state: state === '0' ? '1' : '0'
      }
      await fetchConnectorUpdateState(val)
      this.getConnectorList()
    }
  }
}
</script>

<style lang="less" scoped>
.table-search-wrap,
.page-wrap {
  display: flex;
  justify-content: flex-end;
}
.table-search-wrap {
  margin-bottom: 10px;
}
.page-wrap {
  margin-top: 10px;
}
</style>